import React from 'react';
import { Form, Input, DatePicker, Button, Space } from 'antd';

const { RangePicker } = DatePicker;

const PatientSearch = ({ onSearch }) => {
  const [form] = Form.useForm();

  const handleSearch = (values) => {
    const searchParams = {
      recordNumber: values.recordNumber,
      patientName: values.patientName,
      phone: values.phone,
      dateRange: values.dateRange?.map(date => date?.format('YYYY-MM-DD'))
    };
    onSearch(searchParams);
  };

  const handleReset = () => {
    form.resetFields();
    onSearch({});
  };

  return (
    <Form 
      form={form} 
      layout="inline" 
      onFinish={handleSearch}
      style={{ 
        display: 'flex',
        gap: '16px',
        alignItems: 'center',
        padding: '16px 0',
        flexWrap: 'wrap'
      }}
    >
      <Form.Item name="recordNumber" label="住院号" style={{ marginBottom: 0 }}>
        <Input placeholder="请输入门诊号" allowClear style={{ width: 150 }} />
      </Form.Item>
      <Form.Item name="patientName" label="患者姓名" style={{ marginBottom: 0 }}>
        <Input placeholder="请输入患者姓名" allowClear style={{ width: 150 }} />
      </Form.Item>
      <Form.Item name="phone" label="手机号" style={{ marginBottom: 0 }}>
        <Input placeholder="请输入手机号" allowClear style={{ width: 150 }} />
      </Form.Item>
      <Form.Item name="dateRange" label="就诊日期" style={{ marginBottom: 0 }}>
        <RangePicker format="YYYY-MM-DD" style={{ width: 220 }} />
      </Form.Item>
      <Form.Item style={{ marginBottom: 0 }}>
        <Space>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
          <Button onClick={handleReset}>
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default PatientSearch;